<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>给工具栏样式主题　Bar theming--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/toolbar/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
  <div class="desc"><div>头部栏和尾部栏都默认都设”a"主题样式（黑色），因为这两个工具栏在视觉上为页面最首要的</div></div>
  <h1>给头部栏和尾部栏设置主题样式　Theming headers and footers</h1>
  <div class="desc">
    <div>给头部栏和尾部栏设置data-theme属性，并指定不同的字母（a, b, c等）。下面一个例子是把头部栏的主题样式设?b"(蓝色)</div></div>
  <div class="code"> 
    <p>&lt;div data-role=&quot;header&quot; data-theme=&quot;b&quot;&gt; <br /> 
      　
&lt;h1&gt;Page Title&lt;/h1&gt; <br />
&lt;/div&gt; </p>
</div>

  <h1>给导航栏的按钮设置主题样式　Theming buttons in toolbars</h1>
  <div class="desc">
    <div>头部栏里的任何加入的任何链接会自动设为与此工具栏相同的主题样式。给链接增加 data-theme属性并设置，可以让按钮的主题样式与工具栏的不相一致。例如：如果我们给头部栏设定的主题样式为"c"(浅灰)，里面的两个按钮的主题样式默认也会为"c",如果我们想让按钮有所区别，可以给按钮设置 data-theme?b"(蓝色)</div></div>
    
  <div class="code"> 
    <p>&lt;a href=&quot;add-user.php&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;</p>
</div>

<p class="indent"><strong>不同主题的头部栏</strong></p>
<img src="../../images/Bartheming_1.png" tppabs="http://www.jqmapi.com/images/Bartheming_1.png">
<p class="indent"><strong>不同主题的尾部栏</strong></p>
<img src="../../images/Bartheming_2.png" tppabs="http://www.jqmapi.com/images/Bartheming_2.png">
</div>
</div>
<iframe  id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



